<template>
  <div id="contractNew">
    <el-container>
      <el-main>
        <el-row>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input placeholder="合同编号" v-model="form.contractNo"></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input placeholder="合同名称" v-model="form.contractName"></el-input>
              </el-form-item>
	       <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="form.trellisCode" filterable placeholder="请选择" >
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager" >
                <el-select  v-model="form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="floatLeft">
              <el-form-item label="业务号码">
                <el-input placeholder="业务号码" v-model="form.serialNumber"></el-input>
              </el-form-item>
                <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetSearchForm" size="small">重置</el-button>
            </el-row>
          </el-form>
        </el-row>
        <el-row class="floatLeft">
          <el-button type="primary" size="small" @click="createContract" plain>新增</el-button>
          <el-button type="primary" size="small"  @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-button type="primary" size="small" @click="downloadTemplate">下载模板<i
            class="el-icon-upload el-icon--right"></i></el-button>
          <!--          <el-button type="success" size="small"  plain>修改</el-button>-->
          <!--          <el-button type="danger" size="small"  plain>删除</el-button>-->
          <!--          <el-button type="primary" size="small"  @click="dialogFormVisible = true">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="500"
        >
          <el-table-column label="序号"
                           type="index"
                           width="50"></el-table-column>
          <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
          <el-table-column prop="contractName" label="合同名称" width="280"></el-table-column>
          <el-table-column prop="serialNumber" label="电路编码/号码"></el-table-column>
          <el-table-column prop="yzStaffId" label="发展人编码"></el-table-column>
          <el-table-column prop="accountManager" label="发展人名称"></el-table-column>
          <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
          <el-table-column prop="trellisName" label="网格名称" width="200"></el-table-column>
          <el-table-column prop="signWayName" label="签约方式"></el-table-column>
          <el-table-column prop="inputStaffId" label="录入人员"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="合同于用户关系维护" class="dialogTitle" :visible.sync="dialogTableVisible" @open="openDialog"
                   width="85%">
          <el-form :inline="true" :model="dialog.searchForm" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="合同编号">
                <el-input placeholder="合同编号" v-model="dialog.searchForm.contractNo"></el-input>
              </el-form-item>
              <el-form-item label="合同名称">
                <el-input placeholder="合同名称" v-model="dialog.searchForm.contractName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="dialogSearchFun" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <el-table
            :data="dialog.tableData"
            @row-click="getRowDetails"
            highlight-current-row
            border
            style="width: 100%"
            height="250">
            <el-table-column label="序号"
                             type="index"
                             width="50"></el-table-column>
            <el-table-column prop="contractNoGlobal" label="合同编号"></el-table-column>
            <el-table-column prop="contractName" label="合同名称" width="280"></el-table-column>
            <el-table-column prop="repositoryNameUnicom" label="我方主体"></el-table-column>
            <el-table-column prop="repositoryNameVendor" label="客户名称"></el-table-column>
            <el-table-column prop="businessName" label="业务类型"></el-table-column>
            <el-table-column prop="signWayName" label="计收方式"></el-table-column>
            <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
            <el-table-column prop="trellisname" label="所属网格"></el-table-column>
            <el-table-column prop="yzStaffId" label="客户经理编码"></el-table-column>
            <el-table-column prop="accountmanager" label="客户经理"></el-table-column>
            <el-table-column prop="comName" label="公司名称"></el-table-column>
            <el-table-column prop="deptCode" label="部门代码"></el-table-column>
            <el-table-column prop="deptName" label="部门名称"></el-table-column>
            <el-table-column prop="contractDesc" label="合同注释"></el-table-column>
            <el-table-column prop="contractTimelimitName" label="合同履行期限"></el-table-column>
            <el-table-column prop="performPersonName" label="履行人姓名"></el-table-column>
            <el-table-column prop="performDeptName" label="履行人部门"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="inputDate" label="录入日期" :formatter="formatter"></el-table-column>

          </el-table>
          <el-main>
            <el-form ref="dialogForm" :inline="true" :rules="dialog.rules" :model="dialog.form" label-width="100px"
                     style="float: left">
              <el-row>
                <el-form-item label="合同编号" prop="contractNoGlobal" label-width="110px">
                  <el-input v-model="dialog.form.contractNoGlobal" maxlength="200" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="合同名称" prop="contractName" label-width="110px">
                  <el-input v-model="dialog.form.contractName" style="width: 530px" maxlength="1024"
                            disabled="disabled"></el-input>
                </el-form-item>
              </el-row>
<!--              <el-row>-->
<!--                <el-form-item label="客户名称" prop="repositoryNameVendor" label-width="110px">-->
<!--                  <el-input v-model="dialog.form.repositoryNameVendor" maxlength="2000" disabled="disabled"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="网格名称" prop="trellisName" label-width="110px">-->
<!--                  <el-select @change="getStaffs" v-model="dialog.form.trellisCode" filterable placeholder="请选择" >-->
<!--                    <el-option-->
<!--                      v-for="item in depts"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value">-->
<!--                      <span style="float: left">{{ item.label }}</span>-->
<!--                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="客户经理" prop="accountManager" >-->
<!--                  <el-select  v-model="dialog.form.yzStaffId" filterable placeholder="请选择">-->
<!--                    <el-option-->
<!--                      v-for="item in staffs"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value">-->
<!--                      <span style="float: left">{{ item.label }}</span>-->
<!--                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-row>-->
              <el-row>
                <el-form-item label="电路/业务号码" prop="serialNumber" label-width="110px">
                  <el-input v-model="dialog.form.serialNumber" maxlength="64"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark1">
                  <el-input type="textarea" v-model="dialog.form.remark1" maxlength="500"></el-input>
                </el-form-item>
              </el-row>
              <el-button type="primary" @click="submitForm('dialogForm')">确定</el-button>
              <el-button @click="dialogTableVisible = false">关闭</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form>

          </el-main>
        </el-dialog>

        <el-dialog title="上传合同与业务号码模板" :visible.sync="dialogFormVisible">
          <el-upload
            class="upload-demo"
            action
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            show-file-list="false"
            :on-exceed="handleExceed"
            :http-request="uploadImg">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel.xlsx/xls文件</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {formatDate} from '../../components/utils/formatDate'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import {
    downloadTemplate,
    getBaseDataList,
    queryContractErpImportantList,
    queryContractErpListCount,
    getDept,
    getDeptStaff
  } from '../../components/utils/getDataFn'
  import global from '../../components/utils/global'

  export default {
    name: 'contractNew',
    methods: {
      uploadImg(fileObj) {
        let _this = this;
        let formData = new FormData();
        formData.set("file", fileObj.file);
        axios.post(global.host+'/contractNew/upload', formData, {
          headers: {
            "Content-type": "multipart/form-data",
            "staffId":this.staffId
          }
        }).then(res=>{
          if(res.data.length>0 && res.data!=="上传成功" && res.data!=="请上次相关文件"){
            _this.dialogTable=true
            _this.dialog.table= res.data
          }else{
            _this.open4(res.data)
            _this.searchFn()
          }
        }).catch()
      },open4(message) {
        this.$alert(message, '上传', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      },
      downloadTemplate () {
        downloadTemplate('合同与业务号码模板.xlsx')
      },
      getStaffsFirst(){
        this.form.yzStaffId='';
        getDeptStaff(this.form.trellisCode,this);
      }   ,
      getStaffs(){
        this.dialog.form.yzStaffId='';
        getDeptStaff(this.dialog.form.trellisCode,this);
      }   ,
      formatterCreationDate (row, column) {
        row.creationDate = formatDate(new Date(row.creationDate), 'yyyy-MM-dd')
        return row.creationDate
      },
      createContract () {
        this.dialogTableVisible = true
        this.isCreate = true
      },
      handleEdit (row) {
        this.isCreate = false
        for (let item in this.dialog.form) {
          if (item in row) {
            this.dialog.form[item] = row[item]
          }
        }
        this.dialogTableVisible = true
      },
      resetSearchForm() {
          for (let item in this.form) {
              this.form[item] = ''
            }
      },
      resetForm () {
        if (this.isCreate === true) {
          for (let item in this.dialog.form) {
            if (item !== 'staffId') {
              this.dialog.form[item] = ''
            }

          }
        }
      },
      formatter (row, column) {
        row.inputDate = formatDate(new Date(row.inputDate), 'yyyy-MM-dd')
        return row.inputDate
      },
      handleDelete (row) {
        this.open(row)
      },
      searchFn () {
        this.startSize = 0
        this.endSize = 11
        this.currentPage = 1
        this.queryContractList()
        this.queryContractListCount()
      },
      refreshTable () {
        this.queryContractList()
        this.queryContractListCount()
      },
      onSubmit () {
        this.queryContractList()
        this.queryContractListCount()
      },
      queryContractList: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host + '/contractNew/queryContractList',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryContractListCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host + ':8003/contractNew/queryContractListCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNo: this.form.contractNo,
          yzStaffId: this.form.yzStaffId,
          trellisCode: this.form.trellisCode,
          signWay: this.form.signWay,
          staffId: this.staffId,
          serialNumber: this.form.serialNumber

        }
      },
      //构造弹出表单参数
      getDialogQueryParams () {
        this.dialog.queryParams = {
          startSize: this.dialog.startSize,
          endSize: this.dialog.endSize,
          contractName: this.dialog.searchForm.contractName,
          contractNo: this.dialog.searchForm.contractNo,
          yzStaffId: this.dialog.searchForm.yzStaffId,
          accountManager: this.dialog.searchForm.accountManager,
          trellisCode: this.dialog.searchForm.trellisCode,
          trellisName: this.dialog.searchForm.trellisName,
          signWay: this.dialog.searchForm.signWay,
          staffId: this.dialog.form.staffId
        }
        return this.dialog.queryParams
      },
      getRowDetails (row) {
        this.dialog.form.contractNoGlobal = row.contractNoGlobal
        this.dialog.form.contractName = row.contractName
        this.dialog.form.repositoryNameVendor = row.repositoryNameVendor;
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      dialogSearchFun () {
        this.dialog.contractDialogData = queryContractErpImportantList(this.getDialogQueryParams(), this)
        this.dialog.total = queryContractErpListCount(this.getDialogQueryParams(), this) //调用合同明细Count
      },
      openDialog () {
        document.getElementsByClassName('el-dialog__title').innerText = '新增合同'
        if (this.isCreate === false) {
          document.getElementsByClassName('el-dialog__title').innerText = '修改合同'
        }
      },
      submitForm (formName) {
        let _this = this
        let url = global.host + '/contractNew/insert'
        if (this.isCreate === false) {
          url = global.host + '/contractNew/update'
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let renew = this.dialog.form
            axios.post(url, renew).then((res) => {
              if (res.data.success === true) {
                _this.refreshTable()
                _this.dialogTableVisible = false
                _this.open1(res.data.message)
              } else {
                _this.open2(res.data.message)
              }
            })
          } else {
            return false
          }
        })
      },
      open1 (msg) {
        this.$message({
          message: msg,
          type: 'success'
        })
      },
      open2 (msg) {
        this.$message({
          message: msg,
          type: 'warning'
        })
      },
      open (row) {
        let _this = this
        this.$confirm('请确认是否删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        debugger
          let params = {id: row.id, staffId: this.staffId}
          axios.post(global.host + '/contractNew/delete', params).then((res) => {
            console.log(res)
          debugger
            if (res.data.success === true) {
              _this.refreshTable()
              _this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              _this.$message({
                type: 'info',
                message: '已取消删除'
              })
            }
          })
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    },
    created () {
      this.staffId = getUrlParams('staffId')
      getBaseDataList(1001, this)
      getBaseDataList(2001, this)
      this.dialog.form.staffId = getUrlParams('staffId')
      console.log(this.dialog.form.staffId)
      getDept(this);
    }
    ,
    data () {
      return {
        isCreate: true,// true 新增  false 修改
        staffs:[],
        depts:[],
        signWayData: [], //下来字典
        businessCodingData: [], //业务类型
        dialogTableVisible: false,
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form: {
          contractName: '',
          contractNo: '',
          yzStaffId: '',
          accountManager: '',
          trellisCode: '',
          trellisName: '',
          signWay: '',
          serialNumber:''
        },
        staffId: '',
        dialog: {
          searchForm: {
            contractName: '',
            contractNo: '',
          },
          form: {
            id: '',
            contractNoGlobal: '',
            contractName: '',
            repositoryCode: '',
            repositoryNameVendor: '',
            businessCoding: '',
            serialNumber: '',
            signWay: '',
            yzStaffId: '',
            accountManager: '',
            trellisCode: '',
            trellisName: '',
            remark1: '',
            staffId: ''
          },
          total: 0,
          tableData: [],
          currentPage: 1,
          startSize: 0,
          endSize: 11,
          queryParams: {},
          rules: {
            contractNoGlobal: [{required: true, message: '合同编号', trigger: 'blur'}],
            contractName: [{required: true, message: '合同名称', trigger: 'blur'}],
            repositoryNameVendor: [{required: true, message: '客户名称', trigger: 'blur'}],
            yzStaffId: [{required: true, message: '发展人编码', trigger: 'blur'}],
            trellisCode: [{required: true, message: '网格编码', trigger: 'blur'}],
            serialNumber: [{required: true, message: '电路编码/电话号码', trigger: 'blur'}]
          }
        },

      }
    }
  }
</script>

<style>
  #contractNew {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
